import React, { Component } from 'react'
import { Toast } from 'antd-mobile'
import '../assets/css/login.less'
import KLogo from '../components/KLogo'
import KInput from '../components/KInput'
import KButton from '../components/KButton'
import { hashHistory } from 'react-router'
export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputVal: '17373674593',
      password: '123456'
    }
  }
  handleInput = (val) => {
    this.setState({
      inputVal: val
    })
  }
  handlePassword = (password) => {
    this.setState({ password })
  }
  handleLogin = (e) => {
    console.log(e)
    if (!/^1\d{10}/.test(this.state.inputVal)) {
      return Toast.show({ icon: 'fail', content: '手机号格式不正确' })
    }
    const { inputVal, password } = this.state
    if (inputVal !== '17373674593' || password !== '123456') {
      return Toast.show({ icon: 'fail', content: '用户名或密码错误' })
    }
    Toast.show({icon: 'loading',content:'正在登录',duration:500})
    setTimeout(() => {
      hashHistory.push({ pathname: '/home' })
    }, 500);
  }
  divClick() {
    console.log('divClick')
  }
  render() {
    return (
      <div className="login-page">
        <KLogo height="60px" />
        <KInput
          onChange={this.handleInput}
          value={this.state.inputVal}
          icon="icon-shouji"
          placeholder="手机号码"
          type="text"
          className="mt20"
        />
        <KInput
          onChange={this.handlePassword}
          value={this.state.password}
          icon="icon-mima"
          placeholder="密码"
          type="password"
          className="mt20"
        />
        <KButton onClick={this.handleLogin} className="mt20">
          登录
        </KButton>
        <p className="forget">忘记密码</p>
        <div className="group">
          <KButton>免费注册</KButton>
          <KButton>游客登录</KButton>
        </div>
      </div>
    )
  }
}
